<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>数据字典管理</title>
		<link rel="stylesheet" href="layui/css/layui.css">
		<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
		<script type="text/javascript" src="layui/layui.all.js"></script>
	</head>

	<body>
		<div style="margin:10px 10px;">
			<div class="layui-elem-quote">
				<span class="layui-breadcrumb">
				<a href="">首页</a>
				<a href=""><span class="layui-icon layui-icon-template"></span>基础信息管理</a>
				<a href=""><span class="layui-icon layui-icon-read"></span>数据字典管理</a>
				</span>
			</div>

			<div>
				<form class="layui-form">
					<div class="layui-inline">
						<label class="layui-form-label">字典项目：</label>
						<div class="layui-input-inline">
							<input type="text" id="" class="layui-input" />
						</div>
					</div>
					<div class="layui-inline">
						<label class="layui-form-label">所属类别：</label>
						<div class="layui-input-inline">
							<select id="selectId" name=""></select>

						</div>
					</div>

					<div class="layui-inline">
						<div class="layui-input-inline">
							<a href="" class="layui-btn layui-btn-success">
								<span class="layui-icon layui-icon-search"></span>检索search</a>
						</div>
					</div>
				</form>
			</div>

			<script src="../layui/layui.all.js"></script>

			<script>
				layui.use(['element', 'form', 'laypage', 'table'], function() {
					var element = layui.element;
					var page = layui.laypage;
					var form = layui.form;
					var table = layui.table;
					table.render({
						elem: '#demo',
						height: 460,
						width: 1158,
						url: 'tableJson/data.json',
						page: true, //开启分页
							
						limit: 5,
						limits: [5, 10, 15, 20, 25, 30],
						loading: false,
						done: function(res, curr, count) {
							$("table").css("width", "90%");
						},
						cols: [
							[ //表头
								{
									field: 'id',
									title: '编码值',
									width: 210,
									sort: true,
									fixed: 'left'
								}, {
									field: 'showvalue',
									title: '显示值',
									width: 215
								}, {
									field: 'class',
									title: '所属类别',
									width: 215,
									sort: true
								}, {
									field: 'desc',
									title: '备注信息',
									width: 212
								}, {
									field: 'status',
									title: '操作',
									width: 300,
									height: 30,
									templet: "#buttonTp1"
								}

							]
						]
					});

				
				
				$(function() {
					$.ajax({
						type: "get",
						url: "selectJson/selectDict.json",
						success: function(result) {
							var seoption = "";
							$.each(result.select, function(index, value) {
								seoption += "<option>" + value + "</option>";
							})
							$("#selectId").append(seoption);
							form.render();
						}
					});
				})
				});
			</script>
			
			<script>
			//注意：导航 依赖 element 模块，否则无法进行功能性操作
			layui.use('element', function() {
				var element1 = layui.element;

				element1.render();

				//…
			});
		</script>

			<div class="layui-row">
				<table id="demo" lay-filter="test"></table>
			</div>
			<script type="text/html" id="buttonTp1">
				<a class="layui-btn layui-bg-blue layui-btn-xs" lay-event="detail">编辑</a>
				<a class="layui-btn layui-bg-green layui-btn-xs" lay-event="detail">删除</a>
			</script>

			<div align="right">
				<div id="page"> </div>
			</div>
		</div>
	</body>

</html>